<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
              *{
            padding: 0px;
            margin: 0px;
            list-style: none;
        }
        .wrap{
            position: sticky;
            z-index: 2；
            }
        .wrap a{
            margin: 25px 20px;
            color: rgb(34, 32, 32);
            font-size: 10px;
            position: absolute;
            top: -20%;
            transform: translateX(50%) translateY(-50%);
            right: 20px;
        }
        .wrap{
            position: relative;
        }
        .header img{
             width: 100%;
             height: 700px;
             list-style: none;
             margin: -58px 0px auto
        }
        .logo{
            width: 100%;
            height: 50px;
            background-color:rgba(255,255,255,0.8);
        }
        .logo img{
            display: inline-block;
            vertical-align: middle;
            height: 45px;
            margin: 4px 0px -21px 175px;
            float: left;
        }
        .logo li a{
                margin: 25px 65px 0px;
                float: left;
                width: 43px;
                height: 19px;
                font-size: 14px;
                position: relative;
                text-decoration: none;
        }
        a:nth-of-type(2){
            margin-top: 45px;
        }
        .text span{
            margin: 0px 75px;
            font-size: 25px; 
        }
        .text p{
            font-size: 18px; 
            text-align: justify !important;
            font-family: "microsoft yahei";
            margin: 4.5%;
        }
        .first{
            border-left: 3px solid rgb(246, 78, 69);
            padding-left: 5px;
            padding-right: 5px;   
        }
        .second{
            border-left: 3px solid rgb(246, 78, 69);
            padding-left: 5px;
            padding-right: 5px;   
        }
        body{
            background: url(../images/pic31.jpg) no-repeat;
            background-size: 100% 100%;
            }
    </style>
</head>
<body>
    <div class="wrap">
        <a href="../html/登陆.html" target="_blank">登陆</a>
        <a href="">注册</a>
        <div class="logo">
            <h1>
                    <img src="images/pic2.jpg" alt="">
            </h1>
            <ul>
                <li>
                    <a href="file:///C:/Users/29113/Desktop/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/1.html">首页</a>
                </li>
                </a>
                <li>
                    <a href="肠粉.html">肠粉</a>
                </li>
                <li>
                    <a href="艇仔粥.html">艇仔粥</a>
                </li>
                <li>
                    <a href="虾饺.html">虾饺</a>
                </li>
                <li>
                    <a href="糯米鸡.html">糯米鸡</a>
                </li>
                <li>
                    <a href="蒸排骨.html">蒸排骨</a>
                </li>
                <li>
                    <a href="凤爪.html">凤爪</a>
                </li>
            </ul>
        </div>
        <div class="text">
            <p></p>
            <p class="first">简介</p>
            <p>广式蒸排骨是广东省传统名菜，属于粤菜系。主要食材是猪排骨，主要烹饪工艺是蒸。排骨营养丰富，可补充蛋白质，是食补良品。
            </p>
            <p>
                <img src="../images/pic21.jpg" alt="">
            </p>
            <p class="second">蒸排骨的营养价值</p>
            <p>排骨味甘咸、性平，入脾、胃、肾经；补肾养血，滋阴润燥；主治热病伤津、消渴羸瘦、肾虚体弱、产后血虚、燥咳、便秘、补虚、滋阴、润燥、滋肝阴，润肌肤，利二便和止消渴。
                1、可以补中益气，也可以滋养脾胃，合理食用，可以保健脾胃功能。
                2、可提供血红素（有机铁）和促进铁吸收的半胱氨酸，能改善缺铁性贫血。
                3、富含铁、锌等微量元素，可以强健筋骨。
                4、有着丰富的肌氨酸，可以增强体力，让人精力充沛。
                5、含有大量磷酸钙、骨胶原、骨粘蛋白等，可为幼儿和老人提供钙质。
                
                6、富含蛋白质和脂肪，为人类提供优质蛋白质和必需的脂肪酸，可以补充人体所需的营养。
            </p>
            <p>
                <img src="../images/pic22.jpg" alt="">
            </p>
        </div>
</body>
</html>